<div class="subscription f1280">
  <app-head></app-head>
  <div class="content">
    <div class="subscription-title">
      <h2>最新政策订阅</h2>
      <!--<div>USER SUBSCRIPTION</div>-->
    </div>
    <!--<div class="middle-title">
      <div class="title-left">
        订阅
      </div>
    </div>-->
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()" style="margin-top: 48px">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>电子邮箱</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
          <input nz-input formControlName="email" placeholder="请输入邮箱" type="email"/>
          <ng-template #emailErrorTpl let-control>
            <ng-container *ngIf="control.hasError('email')">
              邮箱格式不合法!
            </ng-container>
            <ng-container *ngIf="control.hasError('required')">
              请输入邮箱!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>政策专题</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="fieldErrorTpl">
          <div class="select-wrap" *ngFor="let fieldItem of field.controls; index as i" formArrayName="field">
            <nz-cascader nzChangeOnSelect [nzValueProperty]="'id'" [nzExpandTrigger]="'hover'"
                         [nzOptions]="fieldOptions" [formControlName]="i">
            </nz-cascader>
            <i nz-icon nzType="plus" nzTheme="outline" style="color: #034ea2;cursor: pointer;margin-bottom: 12px"
               (click)="addField()" *ngIf="i===0"></i>
          </div>


          <ng-template #fieldErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请选择政策专题!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>发布地域</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="areasErrorTpl">
          <!--          <nz-checkbox-group formControlName="areas" [(ngModel)]="areasList"-->
          <!--                             (ngModelChange)="saveChecked()" style="line-height: 2.5;"></nz-checkbox-group>-->
          <nz-checkbox-wrapper  style="line-height: 2.5;" (nzOnChange)="selectedAdd($event)">
            <div *ngFor="let area of objectKeys(areasList)">
              <label nz-checkbox [nzValue]="area" style="font-weight: bold">{{area}}</label>
              <span *ngIf="areasList[area].length" style="font-weight: bold">:<br></span>
              <ng-container *ngIf="areasList[area].length">
                <label *ngFor="let areaChildren of areasList[area]" nz-checkbox
                       [nzValue]="areaChildren">{{areaChildren}}</label>
              </ng-container>
            </div>
          </nz-checkbox-wrapper>
          <ng-template #areasErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
              请选择发布地域!
            </ng-container>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control [nzOffset]="7" [nzSpan]="12">
          <button nz-button nzType="primary" [disabled]="!validateForm.valid">订阅</button>
          <div class="cancel" (click)="isVisible = true">
            已订阅?退订
          </div>
        </nz-form-control>
      </nz-form-item>

    </form>
    <nz-modal [(nzVisible)]="isVisible" nzTitle="退订" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
      <input nz-input placeholder="请输入电子邮箱" [(ngModel)]="deleteEmail" nzSize="large" type="email"/>
    </nz-modal>
  </div>

</div>

<div class="h-foot">
  <div class="text">
    <div class="address">上海推进科技创新中心建设办公室 版权所有</div>
    <div class="address2">地址：上海市浦东新区张东路1158号3号楼 &nbsp;&nbsp;&nbsp;&nbsp; 联系电话 : 021-68796635</div>
    <div class="phone">技术支持 : 中国科学院文献情报中心</div>
    <a class="nav" href="/admin/" target="_blank">后台入口</a>
  </div>
</div>
